<script setup>
import {computed, defineProps, inject, ref} from "vue";
import FormsCountBtn from "@/components/FormsCountBtn.vue";
import {globalContextDataKey1} from "@/constants/gConstants";
import {contains} from "@/utils/StringUtil";

let theProps = defineProps(["label","display"]);

const chooseThisTagAllLijusVisible = ref(false);
const test1Visible = ref(false);
let currChooseLijusFormCount = ref('');

let globalContextData = inject(globalContextDataKey1,undefined);


let cptTheShowingLijus = computed(()=>{
    // console.log("theProps.label:",theProps.label);
    let splits = theProps.label.trim().split(new RegExp('&|\\|'));


    return globalContextData?.flatedYoudaoLijuPatternMarkingTempArr.filter(theLijuEntry=>{
        if(splits&&splits.length===1){
            return theLijuEntry.pickDoneFormsCountsHas(theProps.label);
        }else if(splits&&splits.length>1){
            if(contains(theProps.label,"&")){
                return splits.every(labelSplit=>theLijuEntry.pickDoneFormsCountsHas(labelSplit));
            }else if(contains(theProps.label,"|")){
                return splits.some(labelSplit=>theLijuEntry.pickDoneFormsCountsHas(labelSplit));
            }else {
                return false;
            }
            return false;
        }
    });
})

function chooseThisTagAllLijus(){
    // console.log(theProps.label);
    chooseThisTagAllLijusVisible.value = true;
}

let scrollBarRef = ref();
function scrollBarTo(){
    console.log("scrolling")
    scrollBarRef.value.scrollTo(0,300);
}

let testSw = ref(false);
</script>

<template>
    <el-text><FormsCountBtn :label="display?display:label" @click="chooseThisTagAllLijus"></FormsCountBtn></el-text>
<!--    <FormsCountBtn :label="display?display:label" @click="chooseThisTagAllLijus"></FormsCountBtn>-->
<!--    <el-dialog v-model="chooseThisTagAllLijusVisible" destroy-on-close draggable fullscreen title="对应例句:" width="80%" id="dialog-test1">-->

    <el-dialog v-model="chooseThisTagAllLijusVisible"
               destroy-on-close
               draggable
               overflow
               top="7vh"
               :modal="true"
               title="对应例句:"
               width="98%" id="dialog-test1">
<!--        <el-button @click="test1Visible = true">test1</el-button>-->
<!--        <el-dialog v-model="test1Visible"-->
<!--                   destroy-on-close-->
<!--                   draggable-->
<!--                   overflow-->
<!--                   :append-to-body="true"-->
<!--                   :align-center="true"-->
<!--                   :modal="true"-->
<!--                   title="test1:"-->
<!--                   width="95%"></el-dialog>-->
<!--        1:{{cptTheShowingLijus}}-->

<!--        {{globalContextData.flatedCptShowingFetchedYoudaoLijuResultList}}-->
        <el-scrollbar height="600px" ref="scrollBarRef">
            <div v-if="testSw">
                <el-button @click="scrollBarTo">btn</el-button>
                <a href="#test">目录</a>
            </div>
        <div v-for="(theLijuEntry,idx) in display?globalContextData.flatedCptShowingFetchedYoudaoLijuResultList.value:cptTheShowingLijus">
              <el-text>{{theLijuEntry.eng}}</el-text>
              <br/>
              <el-text>{{theLijuEntry.chi}}</el-text>
        </div>
        <div v-if="testSw">
          <div id="test">内容</div>
          <div style="height:1000px;width:100px;background-color: red;"></div>
        </div>
        </el-scrollbar>
    </el-dialog>
</template>

<style scoped>

.el-text{
    font-size: 15px;
}
</style>